<PageHeader as |p|>
  <p.top>
    <KmipBreadcrumb @scope={{this.scope}} @role={{this.role}}/>
  </p.top>
  <p.levelLeft>
    <h1 class="title is-3">
      Credentials
    </h1>
  </p.levelLeft>
</PageHeader>
<Toolbar>
  <ToolbarActions>
    <ToolbarLink
      @params={{array "credentials.index" this.scope this.role}}
      data-test-kmip-link-back-to-role
    >
      Back to role
    </ToolbarLink>
    {{#if model.deletePath.canDelete}}
      <ModelWrap as |m|>
        <ConfirmAction
          @buttonClasses="toolbar-link"
          @onConfirmAction={{action
            (perform
              m.callMethod
              "destroyRecord"
              model
              "Successfully revoked credentials"
              "There was an error revoking credentials"
              (transition-to "vault.cluster.secrets.backend.kmip.credentials.index" this.scope this.role)
            )
          }}
          @confirmTitle="Revoke this?"
          @confirmMessage="Any client using these credentials will no longer be able to."
          @cancelButtonText="Cancel"
          @confirmButtonText="Revoke"
          >
            Revoke credentials
        </ConfirmAction>
      </ModelWrap>
    {{/if}}
    <CopyButton
      class="toolbar-link"
      @clipboardText={{model.certificate}}
      @success={{action (set-flash-message "Certificate Copied!")}}
      data-test-copy-button
    >
      Copy certificate
      <Chevron />
    </CopyButton>
  </ToolbarActions>
</Toolbar>
<div class="box is-shadowless is-fullwidth is-sideless">
  <InfoTableRow
    @label="Serial number"
    @value={{model.id}}
  />
  <InfoTableRow
    @label="Private key"
    @value={{model.privateKey}}
  >
    <div class="is-block">
    <AlertBanner
      @type="warning"
      @message="You will not be able to access the private key later, so please copy the information below."
      data-test-warning
    />
    <MaskedInput
      @value={{model.privateKey}}
      @name="Private key"
      @allowCopy={{true}}
      @displayOnly={{true}}
      class="is-block"
    />
    </div>
  </InfoTableRow>
  <InfoTableRow
    @label="Certificate"
    @value={{model.certificate}}
  />
  <InfoTableRow
    @label="CA Chain"
    @value={{model.caChain}}
  >
    <div class="is-block">
      {{#each model.caChain as |chain|}}
        <code class="is-block is-word-break has-text-black">{{chain}}</code>
      {{/each}}
    </div>
  </InfoTableRow>
</div>
